<template>
    <div id="logic-flow"></div>
    <div class="footer">
        <el-button @click="save" size="mini" type="primary">保存</el-button>
    </div>
    <Toolbar :curNode="curNode" />
    <div class="popover" :style="popover.popoverStyle" v-show="popover.popoverVisible">
        <el-row justify="space-around" align="middle">
            <Iconfont name="delete" :onClick="deleteNode" />
            <el-divider direction="vertical"></el-divider>
            <Iconfont name="close" :onClick="closePopover" />
        </el-row>
    </div>
    <Navigation />
</template>

<script>
    import LogicFlow from '@logicflow/core'
    import Iconfont from '@/components/core/iconfont.vue'
    import '@logicflow/core/dist/style/index.css'
    import { SelectionSelect, Snapshot } from '@logicflow/extension'
    import '@logicflow/extension/lib/style/index.css'
    import { testData } from './constant.js'
    import Navigation from './navigation.vue'
    import Toolbar from './toolbar.vue'
    LogicFlow.use(SelectionSelect)
    LogicFlow.use(Snapshot)
    import { defineComponent, reactive, toRefs, watch, inject } from 'vue'
    import { useStore } from 'vuex'

    export default defineComponent({
        name: 'LogicFlow',
        components: {
            Iconfont,
            Navigation,
            Toolbar,
        },
        setup() {
            let lf = null
            const state = reactive({
                popover: {
                    popoverStyle: '',
                    popoverVisible: false,
                },
                curNode: null,
                data: testData,
            })
            let height = inject('contentHeight')

            const store = useStore()

            watch(height, (nval) => {
                initLogicFlow(nval)
            })

            function initLogicFlow(h) {
                let { data, popover } = state
                lf = new LogicFlow({
                    container: document.querySelector('#logic-flow'),
                    stopScrollGraph: true,
                    stopZoomGraph: true,
                    // width: 500,
                    height: h - 55,
                    grid: {
                        type: 'dot',
                        size: 20,
                    },
                    // 样式配置
                    style: {
                        rect: {
                            radius: 6,
                        },
                    },
                })
                store.commit('logicFlow/setLf', lf)

                lf.openSelectionSelect()
                lf.render(data)

                lf.on('node:click', (args) => {
                    console.log('node:click', args)
                    state.curNode = args.data
                })
                lf.on('blank:click', (args) => {
                    popover.popoverVisible = false
                })
                lf.on('node:contextmenu', (args) => {
                    console.log('node:contextmenu', args)
                    popover.popoverVisible = true
                    const { x, y } = args.position.canvasOverlayPosition
                    popover.popoverStyle = `top: ${y}px; left: ${x}px;`
                    state.curNode = args.data
                })
            }

            function closePopover() {
                state.popover.popoverVisible = false
            }

            function deleteNode() {
                let { curNode, popover } = state
                lf.deleteNode(curNode.id)
                popover.popoverVisible = false
                curNode = null
            }

            return { ...toRefs(state), closePopover, deleteNode }
        },
    })
</script>

<style lang="less" scoped>
    @import url('@/common.less');

    .popover {
        background: white;
        padding: 10px;
        position: fixed;
        border-radius: 5px;
        box-shadow: @box-shadow;
    }
    .footer {
        display: flex;
        align-items: flex-start;
        height: 40px;
        margin-top: 15px;
    }
</style>
